#伝説

グラフの凡例には、グラフに表示されているデータセットに関するデータが表示されます。

#構成オプション

名前空間:options.plugins.legend、チャートの凡例のグローバルオプションは次のように定義されます。Chart.defaults.plugins.legend。

警告

ドーナツグラフ、円グラフ、極面グラフは凡例のデフォルトをオーバーライドします。これらのグラフタイプの上書きを変更するには、オプションが次のように定義されています。Chart.overrides[type].plugins.legend。

名前	タイプ	デフォルト	説明
`display`	`boolean`	`true`	凡例は表示されますか?
`position`	`string`	`'top'`	レジェンドの位置。もっと...
`align`	`string`	`'center'`	凡例の配置。もっと...
`maxHeight`	`number`		凡例の最大高さ (ピクセル単位)
`maxWidth`	`number`		凡例の最大幅 (ピクセル単位)
`fullSize`	`boolean`	`true`	このボックスがキャンバスの幅/高さ全体を占めるようにマークします (他のボックスを移動します)。日常的な使用においては、これを変更する必要はほとんどありません。
`onClick`	`function`		クリックイベントがラベルアイテムに登録されたときに呼び出されるコールバック。引数:`[event, legendItem, legend]`。
`onHover`	`function`		「mousemove」イベントがラベル項目の上に登録されたときに呼び出されるコールバック。引数:`[event, legendItem, legend]`。
`onLeave`	`function`		「mousemove」イベントが、以前にホバーされたラベル項目の外側で登録されたときに呼び出されるコールバック。引数:`[event, legendItem, legend]`。
`reverse`	`boolean`	`false`	凡例にはデータセットが逆の順序で表示されます。
`labels`	`object`		を参照してください。凡例ラベルの構成以下のセクション。
`rtl`	`boolean`		`true`凡例を右から左にレンダリングします。
`textDirection`	`string`	キャンバスのデフォルト	これによりテキストの方向が強制されます`'rtl'`また`'ltr'`キャンバス上で指定された CSS に関係なく、凡例をレンダリングするためにキャンバス上に
`title`	`object`		を参照してください。凡例タイトルの構成以下のセクション。

ノート

さらに視覚的なカスタマイズが必要な場合は、HTML凡例。

#位置

レジェンドの位置。オプションは次のとおりです。

'top'
'left'
'bottom'
'right'
'chartArea'

を使用するときは、'chartArea'オプションの凡例の位置は現時点では設定できません。常にチャートの左側中央に表示されます。

#整列

凡例の配置。オプションは次のとおりです。

'start'
'center'
'end'

デフォルトは'center'認識されない値の場合。

#凡例ラベルの構成

名前空間:options.plugins.legend.labels

名前	タイプ	デフォルト	説明
`boxWidth`	`number`	`40`	カラーボックスの幅。
`boxHeight`	`number`	`font.size`	カラーボックスの高さ。
`color`	`Color`	`Chart.defaults.color`	ラベルの色と取り消し線。
`font`	`Font`	`Chart.defaults.font`	見るフォント
`padding`	`number`	`10`	カラーボックスの行間のパディング。
`generateLabels`	`function`		凡例内の各項目の凡例項目を生成します。デフォルトの実装は、カラーボックスのテキストとスタイルを返します。見るレジェンドアイテム詳細については。
`filter`	`function`	`null`	凡例から凡例項目をフィルターします。 2 つのパラメータを受け取ります。レジェンドアイテムそしてチャートデータ。
`sort`	`function`	`null`	凡例項目を並べ替えます。タイプは:bf319e07-c8b8-4464-8b48-d6701f61fb37。 3 つのパラメータを受け取ります (2 つ)レジェンドアイテムそしてチャートデータ。関数の戻り値は、2 つの凡例項目パラメーターの順序を示す数値です。順序は一致します戻り値 (新しいウィンドウが開きます)の`Array.prototype.sort()`
`pointStyle`	`pointStyle`	`'circle'`	指定した場合、このスタイルの点が凡例に使用されます。次の場合にのみ使用されます`usePointStyle`それは本当です。
`textAlign`	`string`	`'center'`	ラベルテキストの水平方向の配置。オプションは次のとおりです。`'left'`、`'right'`また`'center'`。
`usePointStyle`	`boolean`	`false`	ラベルスタイルは、対応するポイントスタイルと一致します (サイズは、pointStyleWidth または boxWidth と font.size の間の最小値に基づきます)。
`pointStyleWidth`	`number`	`null`	もしも`usePointStyle`true の場合、凡例に使用されるポイントスタイルの幅です。
`useBorderRadius`	`boolean`	`false`	ラベル borderRadius は、対応する borderRadius と一致します。
`borderRadius`	`number`	`undefined`	使用する borderRadius をオーバーライドします。

#凡例タイトルの構成

名前空間:options.plugins.legend.title

名前	タイプ	デフォルト	説明
`color`	`Color`	`Chart.defaults.color`	テキストの色。
`display`	`boolean`	`false`	凡例のタイトルが表示されます。
`font`	`Font`	`Chart.defaults.font`	見るフォント
`padding`	`Padding`	`0`	タイトルの周りのパディング。
`text`	`string`		文字列のタイトル。

#凡例項目インターフェイス

レジェンドに引き継がれるアイテムonClick関数はから返されるものですlabels.generateLabels。これらの項目は次のインターフェイスを実装する必要があります。

{
    // Label that will be displayed
    text: string,
    // Border radius of the legend item.
    // Introduced in 3.1.0
    borderRadius?: number | BorderRadius,
    // Index of the associated dataset
    datasetIndex: number,
    // Fill style of the legend box
    fillStyle: Color,
    // Text color
    fontColor: Color,
    // If true, this item represents a hidden dataset. Label will be rendered with a strike-through effect
    hidden: boolean,
    // For box border. See https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineCap
    lineCap: string,
    // For box border. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash
    lineDash: number[],
    // For box border. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset
    lineDashOffset: number,
    // For box border. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin
    lineJoin: string,
    // Width of box border
    lineWidth: number,
    // Stroke style of the legend box
    strokeStyle: Color,
    // Point style of the legend box (only used if usePointStyle is true)
    pointStyle: string | Image | HTMLCanvasElement,
    // Rotation of the point in degrees (only used if usePointStyle is true)
    rotation: number
}

#例

次の例では、凡例を有効にしてグラフを作成し、すべてのテキストを赤色にします。

const chart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        plugins: {
            legend: {
                display: true,
                labels: {
                    color: 'rgb(255, 99, 132)'
                }
            }
        }
    }
});

#カスタムのクリック時アクション

凡例内の項目をクリックしたときに、異なる動作をトリガーしたい場合がよくあります。これは、config オブジェクトのコールバックを使用して簡単に実現できます。

デフォルトの凡例クリックハンドラーは次のとおりです。

function(e, legendItem, legend) {
    const index = legendItem.datasetIndex;
    const ci = legend.chart;
    if (ci.isDatasetVisible(index)) {
        ci.hide(index);
        legendItem.hidden = true;
    } else {
        ci.show(index);
        legendItem.hidden = false;
    }
}

代わりに、最初の 2 つのデータセットの表示をリンクしたいとします。それに応じてクリックハンドラーを変更できます。

const defaultLegendClickHandler = Chart.defaults.plugins.legend.onClick;
const pieDoughnutLegendClickHandler = Chart.controllers.doughnut.overrides.plugins.legend.onClick;
const newLegendClickHandler = function (e, legendItem, legend) {
    const index = legendItem.datasetIndex;
    const type = legend.chart.config.type;
    if (index > 1) {
        // Do the original logic
        if (type === 'pie' || type === 'doughnut') {
            pieDoughnutLegendClickHandler(e, legendItem, legend)
        } else {
            defaultLegendClickHandler(e, legendItem, legend);
        }
    } else {
        let ci = legend.chart;
        [
            ci.getDatasetMeta(0),
            ci.getDatasetMeta(1)
        ].forEach(function(meta) {
            meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null;
        });
        ci.update();
    }
};
const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        plugins: {
            legend: {
                onClick: newLegendClickHandler
            }
        }
    }
});

このグラフの凡例をクリックすると、最初の 2 つのデータセットの表示設定がリンクされます。

←レイアウトロケール→